<template>
  <el-card>
    <h1>富文本</h1>
    <el-divider></el-divider>
    <vue-wangeditor v-model="content" id="editor" width="100%" ref="editor" />
    <el-button @click="getHtml" type="primary">获取内容</el-button>
    <el-button @click="setHtml" type="success">设置内容</el-button>
  </el-card>
</template>

<script>
// 1-导入
import vueWangeditor from "vue-wangeditor";
export default {
  //2-注册组件
  components: {
    vueWangeditor
  },
  data() {
    return {
      content: `
            <h1>hello 富文本</h1>
            `
    };
  },
  methods: {
    getHtml() {
      const html = this.$refs.editor.getHtml();
      console.log(html);
    },
    setHtml() {
        this.$refs.editor.setHtml(`
            <h1>你好, 世界</h1>
        `);
    }
  }
};
</script>

<style>
</style>